<template>
  <div class="slidebar">
    <el-scrollbar>
      <div class="side-navbar" :class="{'active':isCollapse}">
        <el-menu
          class="el-menu-vertical"
          :collapse="isCollapse"
          :router="true"
          :unique-opened="true"
        >
          <slide-menu-item :permissionVoList="permissionList"></slide-menu-item>
        </el-menu>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import SlideMenuItem from "common/SlideMenuItem";

import { mapState } from "vuex";

export default {
  name: "Left",
  props: {
    isCollapse: Boolean
  },
  components: {
    SlideMenuItem
  },
  computed: {
    ...mapState(["permissionList"])
  }
};
</script>
<style lang="stylus" scoped>
@import '~assets/css/style.styl';

.slidebar {
  background: $colorPrimary;
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;

  .side-navbar.active {
    min-width: $side-navbar-small-width;
    max-width: $side-navbar-small-width;
    height: 100vh;

    & >>> .el-menu {
      margin: 0 auto;
    }
  }

  .side-navbar {
    min-width: $side-navbar-large-width;
    max-width: $side-navbar-large-width;
    color: $menuFontColor;
    z-index: 999;
    position: relative;
    height: 100%;
    padding: 80px 0;
    display: block;
    styl_transition();
    height 100vh;

    & >>> .el-menu {
      border-right: none;
      background: transparent;
      color: $menuFontColor;

      .el-submenu__title, .el-menu-item, .el-submenu__title i {
        color: $menuFontColor;
      }

      .el-submenu__title:hover, .el-menu-item:hover, .el-menu-item:active, .el-menu-item:focus {
        background: $colorPrimary;
      }

      .el-menu--inline {
        background: $colorPrimaryDark;
      }
    }
  }
}
</style>


